<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索结果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 搜索栏样式 */
        .search-bar {
            background-color: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .search-form {
            display: flex;
            gap: 10px;
        }

        .product-line-select {
            width: 200px;
            padding: 10px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            outline: none;
        }

        .search-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            outline: none;
        }

        .search-button {
            padding: 0 20px;
            background-color: #409EFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 热门搜索 */
        .hot-search {
            margin-top: 15px;
            font-size: 14px;
        }

        .hot-search span {
            color: #999;
        }

        .hot-search a {
            color: #666;
            margin-right: 15px;
            text-decoration: none;
        }

        .hot-search a:hover {
            color: #409EFF;
        }

        /* 面包屑导航 */
        .breadcrumb {
            padding: 15px 0;
            font-size: 14px;
            color: #999;
        }

        .breadcrumb a {
            color: #409EFF;
            text-decoration: none;
        }

        /* 无结果提示 */
        .no-results {
            background-color: white;
            padding: 40px;
            text-align: center;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            color: #999;
            font-size: 16px;
        }
        .product-list {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .product-item {
            margin-bottom: 20px;
            transition: all 0.3s;
        }

        .product-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            width: 120px;
            height: 120px;
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f7fa;
            border: 1px solid #ebeef5;
            border-radius: 4px;
        }

        .product-info {
            flex: 1;
        }

        .product-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .product-meta {
            font-size: 13px;
            color: #909399;
            margin-bottom: 10px;
        }

        .applicable-models {
            margin-bottom: 15px;
        }

        .model-title {
            font-size: 13px;
            color: #909399;
            margin-bottom: 5px;
        }

        .model-tag {
            margin-right: 8px;
            margin-bottom: 5px;
        }

        .product-actions {
            margin-top: 15px;
        }

        .product-actions .el-button {
            margin-right: 10px;
        }

        .product-price {
            width: 150px;
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .price {
            margin-bottom: 15px;
        }

        .price-symbol {
            font-size: 14px;
            color: #f56c6c;
        }

        .price-value {
            font-size: 20px;
            font-weight: bold;
            color: #f56c6c;
        }

        .price-free {
            font-size: 16px;
            color: #67c23a;
        }

        .buy-button {
            width: 100%;
        }

        .consult-button {
            width: 100%;
        }

        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #909399;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 搜索栏 -->
    <div class="search-bar">
        <form class="search-form" action="search-results.html" method="get">
            <input type="text" class="search-input" name="keyword" :value="keyword" placeholder="请输入关键词">
            <button type="submit" class="search-button">搜索</button>
        </form>
    </div>

    <!-- 产品列表 -->
    <div class="product-list" v-if="searchResults.length > 0">
        <!-- 产品项 -->
        <el-card
                class="product-item"
                v-for="(product, index) in searchResults"
                :key="index"
                shadow="hover"
                :body-style="{ padding: '20px', display: 'flex' }">
            <div class="product-image">
                <el-image
                        style="width: 120px; height: 120px"
                        :src="product.imageUrl || 'https://via.placeholder.com/120'"
                        fit="contain">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </div>

            <div class="product-info">
                <div class="product-name">
                    <el-tag v-if="product.isNew" type="danger" size="mini">新品</el-tag>
                    {{ product.productName }}
                </div>

                <div class="product-meta">
                    <span>物料代码: {{ product.productNumber }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>重量: {{ product.weight || '0' }}kg</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>销量: {{ product.sales || '0' }}件</span>
                </div>

                <div class="applicable-models" v-if="getApplicableModels(product).length > 0">
                    <div class="model-title">适用机型：</div>
                    <el-tag
                            class="model-tag"
                            v-for="(model, i) in getApplicableModels(product)"
                            :key="i"
                            size="small"
                            type="info">
                        {{ model }}
                    </el-tag>
                </div>

                <div class="product-actions">
                    <el-button
                            size="small"
                            @click="addToCart(product)"
                            icon="el-icon-shopping-cart-2">
                        加入购物车
                    </el-button>
                    <el-button
                            size="small"
                            @click="addToFavorites(product)"
                            icon="el-icon-star-off">
                        收藏
                    </el-button>
                </div>
            </div>

            <div class="product-price">
                <div class="price">
                    <template v-if="product.price > 0">
                        <span class="price-symbol">¥</span>
                        <span class="price-value">{{ product.price }}</span>
                    </template>
                    <template v-else>
                        <span class="price-free">免费</span>
                    </template>
                </div>

                <el-button
                        v-if="product.stock > 0"
                        type="primary"
                        size="small"
                        @click="buyNow(product)"
                        class="buy-button">
                    立即购买
                </el-button>
                <el-button
                        v-else
                        type="info"
                        size="small"
                        @click="consult(product)"
                        class="consult-button">
                    请咨询内务
                </el-button>
            </div>
        </el-card>
    </div>

    <div class="block" style="text-align: center;padding: 20px;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3,5,7,10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>



</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
<script>
    // 获取URL参数
    function getQueryParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // 初始化Vue应用
    var app = new Vue({
        el: ".container",
        data: {
            keyword: getQueryParam('keyword') || '',
            searchResults: [],
            isLoading: true,
            currentPage: 1, // 当前页码
            pageSize: 10,   // 每页显示数量
            totalCount: 0,   // 总记录数
        },
        mounted() {
            // 从URL获取搜索参数
            const params = new URLSearchParams(window.location.search);
            this.keyword = params.get('keyword') || '剪刀';

            this.fetchSearchResults();
        },
        create(){
            window.addEventListener('message', function(event) {
                if (event.data.type === 'init') {
                    // 使用传递的参数初始化页面
                    if (event.data.params.keyword) {
                        document.querySelector('.search-input').value = event.data.params.keyword;
                    }

                }
            });
        },
        methods: {
            fetchSearchResults() {
                if (!this.keyword) return;

                axios.get('/product/SelectByproductID', {
                    params: {
                        keyword: this.keyword
                    }
                }).then(response => {
                    if (response.data.code === 20041) {
                        this.searchResults = response.data.data;
                    }
                }).catch(error => {
                    console.error('搜索失败:', error);
                }).finally(() => {
                    this.isLoading = false;
                });
            },
            getApplicableModels(product) {
                return product.models || [];
            },
            addToCart(product) {
                console.log("加入购物车:", product);
                alert(`已将 ${product.productName} 加入购物车`);
            },
            addToFavorites(product) {
                console.log("收藏产品:", product);
                alert(`已收藏 ${product.productName}`);
            },
            buyNow(product) {
                console.log("立即购买:", product);
                alert(`立即购买 ${product.productName}`);
            },
            consult(product) {
                console.log("咨询产品:", product);
                alert(`已提交 ${product.productName} 的咨询请求`);
            },
            changePageSize() {
                this.currentPage = 1;
                this.fetchSearchResults();
            },
            goToPage(page) {
                if (page < 1) page = 1;
                if (page > this.totalPages) page = this.totalPages;
                this.currentPage = page;
                this.fetchSearchResults();
            },
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.fetchSearchResults();
                }
            },
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.fetchSearchResults();
                }
            }
        }
    });
</script>
</html>